<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!--bootstrap-->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap.min.css" />
    <!--bootstrap-toastr-->
    <script type="text/javascript" src="/js/toastr/toastr.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/toastr/toastr.css" />
    <!--zTree-->
    <link rel="stylesheet" type="text/css" href="/zTreev3/css/zTreeStyle/zTreeStyle.css"/>
    <script src="/zTreev3/js/jquery.ztree.all.js"></script>
</head>
<body>
<form class="form-horizontal" role="form" id="addForm">
    <div class="form-group">

    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">角色名称</label>
        <div class="col-sm-5">
            <input type="text" name="name" class="form-control" id="name" placeholder="请输入">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">权限</label>
        <div class="col-sm-4">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-success" onclick="addRole()">确定</button>
        </div>
    </div>
</form>
</body>
</html>
<script>

    function addRole(){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        // alert(treeObj);
        var nodes = treeObj.getCheckedNodes(true);
        var nodeIds = [];
        for (var i = 0; i < nodes.length; i++) {
            nodeIds.push(nodes[i].id);
        }
        if (nodeIds.length <= 0){
            toastr.error("请选择权限");
            return;
        }
        var role = {
            "name": $("#name").val(),
        }
        var j_role = JSON.stringify(role);
        $.ajax({
            url : "/role?rid="+nodeIds,
            dataType : "json",
            contentType : 'application/json;charset=UTF-8',
            type : "post",
            data : j_role ,
            success : function (data) {
                if (data.code == 200 ){
                    toastr.success("增加成功");
                    setTimeout(function () {
                        parent.location.reload();
                    }, 1000);
                }
            },
            error : function (e) {
                alert("系统错误");
            }
        })
    }

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        check: {
            enable: true,
            autoCheckTrigger: true
        },
        async: {
            enable: true,
            url: "/menu/zTree",
            type : "get",
            autoParam: ["id", "name"]
        }
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting);
    });

</script>